<script setup>
import {Timer, Star, Select, CloseBold} from '@element-plus/icons-vue'
import {onMounted, ref, watch} from "vue";
import axios, {toFormData} from "axios";
const alldata=ref([])   //拿到的所有数据
let consultantId= ref() //咨询师的id
let appointmentId = ref()  //预约id
let memberId = ref()       //会员id
let username = ref()       //会员用户名
let startTime = ref()      //开始时间
let endTime = ref()        //结束时间
let consultationContent = ref()  //咨询内容
let completionStatus = ref()        //完成状态
let PageNum = ref(1)    //当前页数
let PageSize = ref(5)   //每页条数
let AllPageNum = ref()        //所有页数
//------------------------页面加载就开始拿数据-----------------------------
onMounted(()=>{
  consultantId.value=JSON.parse(localStorage.getItem("key")).data.consultantId
  axios.get("/consultationAppointments/selectAllByConsultationAppointments",
      {params:{pageNum:PageNum.value,pageSize:PageSize.value,consultantId:consultantId.value}})
      .then((res)=>{
        console.log("咨询师预约信息")
        alldata.value = res.data.data.list;
        AllPageNum.value =Math.ceil((res.data.data.total)/(PageSize.value));
        console.log(alldata.value)

        console.log("所有页数")
        console.log(AllPageNum.value)
      })
      .catch((err)=>{
        console.log(err)
      })
})
//------------------------------------------------------------------

//==============每次当页面数据改动时，为确保有动态变化效果(无需刷新页面)================
const refreshdata=function () {
  if(startTime.value==='') {
    startTime.value = undefined;
  }else if(endTime.value==='') {
    endTime.value = undefined;
  }
  console.log(startTime.value);
  if(username.value!=null && username.value!=''){
    axios.get("http://localhost/api/selectByUsername?username="+username.value)
    .then(res => {
      console.log("根据username查到的值")
      console.log(res.data.data.memberId)
      memberId.value=res.data.data.memberId
      axios.get("/consultationAppointments/selectAllByConsultationAppointments",{params:{pageNum:PageNum.value,pageSize:PageSize.value,consultantId:consultantId.value,appointmentId:appointmentId.value,memberId:memberId.value,startTime:startTime.value,endTime:endTime.value,consultationContent:consultationContent.value,completionStatus:completionStatus.value}})
          .then((res)=>{
            console.log("输出res")
            console.log(res)
            if(res.data.code===200){
              alldata.value = res.data.data.list;
              AllPageNum.value =Math.ceil((res.data.data.total)/(PageSize.value));
            }else{
              alldata.value = '';
            }
          })
          .catch((err)=>{
            console.log(err)
          })
    })
        .catch(err => {
          console.log(err)
        })
  }else{
    axios.get("/consultationAppointments/selectAllByConsultationAppointments",{params:{pageNum:PageNum.value,pageSize:PageSize.value,consultantId:consultantId.value,appointmentId:appointmentId.value,memberId:memberId.value,startTime:startTime.value,endTime:endTime.value,consultationContent:consultationContent.value,completionStatus:completionStatus.value}})
        .then((res)=>{
          console.log("输出res")
          console.log(res)
          if(res.data.code===200){
            alldata.value = res.data.data.list;
            AllPageNum.value =Math.ceil((res.data.data.total)/(PageSize.value));
          }else{
            alldata.value = '';
          }
        })
        .catch((err)=>{
          console.log(err)
        })
  }

}

//========================================================================


// ------------------------改方法是当点击状态时可以切换状态  已完成---未完成-------------
const changeStatus=(id,status)=> {
  console.log("传来的数据")
  console.log(status)
  let nowstatus = ref('')
  if(status==='已完成'){
     nowstatus.value='未完成';
    console.log(nowstatus.value)
    axios.patch("/consultationAppointments", {appointmentId: id, completionStatus: nowstatus.value})
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
  }else if(status==='未完成'){
    nowstatus.value='已完成';
    console.log(nowstatus.value)
    axios.patch("/consultationAppointments", {appointmentId: id, completionStatus: nowstatus.value})
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
  }
  refreshdata();
  refreshdata();
}

// ------------------------------------------------------------------------------

//======================删除信息=============================================

const handleDelete=(id)=>{
    axios.delete("/consultationAppointments",{params:{id:id}})
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
  refreshdata();
}
//=========================================================================

//-------------------------------搜索功能-----------------------------------
const search=()=>{
  console.log(username.value)
  refreshdata();
}
//-----------------------------------------------------------------------

//============================分页功能======================================
//监听页数变化
watch(PageNum,(newVal,oldVal)=>{
  console.log(newVal)
  refreshdata();
})



//======================================================================
</script>

<template>
<!--  搜索框-->
  <div style="width: 100%;display: flex;justify-content:space-between;align-items: center;">
      <el-input
          v-model="appointmentId"
          style="width: 130px"
          size="large"
          placeholder="搜索预约编号"
      />
    <el-input
        v-model="memberId"
        style="width: 130px"
        size="large"
        placeholder="搜索会员Id"
    />
    <el-input
        v-model="username"
        style="width: 130px"
        size="large"
        placeholder="搜索会员用户名"
    />
    <el-input
        v-model="startTime"
        style="width: 130px"
        size="large"
        placeholder="搜索开始时间"
    />
    <el-input
        v-model="endTime"
        style="width: 130px"
        size="large"
        placeholder="搜索结束时间"
    />
    <el-input
        v-model="consultationContent"
        style="width: 130px"
        size="large"
        placeholder="搜索咨询内容"
    />
    <el-input
        v-model="completionStatus"
        style="width: 130px"
        size="large"
        placeholder="完成状态"
    />
    <button
        style="height:50px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 200px;text-align:  center;cursor:pointer;color: white;border: none;float: none"
        @click="search">开始搜索
    </button>
  </div>



  <el-table :data="alldata" style="width: 100%;">
    <el-table-column label="预约编号" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.appointmentId }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会员ID" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.member.memberId}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会员用户名" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.member.username}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="开始时间" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="结束时间" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="咨询内容" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.consultationContent }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="完成状态" width="170">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span v-if="scope.row.completionStatus==='已完成'">
            <el-icon color="green"><Select /></el-icon>
          </span>
          <span v-if="scope.row.completionStatus==='未完成'">
            <el-icon color="red"><CloseBold /></el-icon>
          </span>
          <span @click="changeStatus(scope.row.appointmentId,scope.row.completionStatus)" style="margin-left: 10px;cursor: pointer;"><el-tag :class="scope.row.completionStatus==='已完成' ? 'd2':'d1'">{{ scope.row.completionStatus }}</el-tag></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.appointmentId)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>




<!--  分页-->
  <div class="demo-pagination-block">
    <div class="demonstration">跳转页面...</div>
    <el-pagination
        v-model:current-page="PageNum"
        v-model:page-size="PageSize"
        layout="prev, pager, next, jumper"
        :total="AllPageNum*5"
    />
  </div>
</template>
<style scoped>

.d1{
  color: red;
}
.d2{
  color: green;
}
</style>